<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="author" content="Cassie">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="keywords" content="">
  <title>Night</title>
  <link rel="stylesheet" href=""> 
  <!-- link bootstrap -->
  <!-- <link rel="stylesheet" href="bootstrap.min.css"/>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"/></script>
  <script src="bootstrap.min.js"></script>  -->
  <style>
      *{
          margin: 0;
          padding: 0;
      }
      ul li{
          list-style: none;
      }
      .banner{
          position: relative;
          margin: 0 auto;
          width: 400px;
          height: 300px;
          overflow: hidden;
      }
      .banner ul{
          position: absolute;
          left: 0;
          width: 2000px;
          transition: 1s;
      }
      .banner ul li,.banner ul li a, .banner ul li img{
          float: left;
          width: 400px;
          height: 300px;
      }
      .btn{
          position: absolute;
          left: 50%;
          margin-left: -50px;
          bottom: 10px;
          /* width: 100px;
          height: 20px;
          background-color: goldenrod; */
      }
      .btn span{
            color: white;
            font-size: 12px;
            width: 15px;
            height: 15px;
            line-height: 15px;
            text-align: center;
            display: inline-block;
            background: black;
            opacity: 0.5;
            border-radius: 50%;
            margin-left: 6px;
            cursor: pointer;
        }
        .btn span.cur{
            background: red;
        }
  </style>
 </head>
 <body>
       <div class="banner">
           <ul>
                <li><a href="#"><img src="./images/banner1.jpg" alt=""></a></li>
                <li><a href="#"><img src="./images/banner2.jpg" alt=""></a></li>
                <li><a href="#"><img src="./images/banner3.jpg" alt=""></a></li>
                <li><a href="#"><img src="./images/banner4.jpg" alt=""></a></li>
           </ul>
           <div class="btn"></div>
       </div>
    <script>
       let ul = document.querySelector('ul');
       let lis = document.querySelectorAll('ul li');
       let btn = document.querySelector('.btn');
       let len = lis.length;
       let i = 0;
       let Time = setInterval(move,2000);
       //创建span标签
       for(var j = 1; j <= len; j++) {
			var span = document.createElement('span')
			span.innerHTML = j;
			btn.appendChild(span)
		}
		var spans = document.querySelectorAll('.btn span')
		
		spans.forEach(function(v, index){
			if(index == i) {
				v.className = 'cur'
			}
            v.onclick=function(){
            i = index;
            move();
            this.className = 'cur'
           }
		})
        function move(){
            if(i == len){ 
                i = 0;
            }
            ul.style.left = `${-400*i}px`;
            spans.forEach(function(v, index){
                    v.classList.remove('cur')
                    if(index == i) {
                        v.className = 'cur'
                    }
                })
            i++;
            console.log(ul.style.left,i);
            
        }
        
       


        ul.onmouseover = function(){
        clearInterval(Time);
        }
        ul.onmouseout = function(){
         Time = setInterval(move,2000);
        }

    </script>
 </body>
 </html>